Tryit Editor v2.3

Edit This Code:
<!DOCTYPE html> <html> <head> <style> #navlist { position: relative; } #navlist li { margin: 0; padding: 0; list-style: none; position: absolute; top: 0; } #navlist li, #navlist a { height: 44px; display: block; } #home { left: 0px; width: 46px; background: url('img_navsprites_hover.gif') 0 0; } #prev { left: 63px; width: 43px; background: url('img_navsprites_hover.gif') -47px 0; } #next { left: 129px; width: 43px; background: url('img_navsprites_hover.gif') -91px 0; } #home a:hover { background: url('img_navsprites_hover.gif') 0 -45px; } #prev a:hover { background: url('img_navsprites_hover.gif') -47px -45px; } #next a:hover { background: url('img_navsprites_hover.gif') -91px -45px; } </style> </head> <body> <ul id="navlist"> <li id="home"><a href="default.html"></a></li> <li id="prev"><a href="css_intro.html"></a></li> <li id="next"><a href="css_syntax.html"></a></li> </ul> </body> <!-- Mirrored from www.w3schools.com/css/tryit.asp?filename=trycss_sprites_hover_nav by HTTrack Website Copier/3.x [XR&CO'2014], Fri, 23 Jan 2015 07:23:42 GMT --> </html>
Result:
Try it Yourself - © w3schools.com